<template>
    <el-button
        v-if="isFlowContext"
        @click="fixWithAi"
        class="position-absolute slack-on-error el-button--small"
        size="small"
    >
        <AiIcon class="me-1" />
        <span>{{ $t("fix_with_ai") }}</span>
    </el-button>
    <span v-html="markdownRenderer" v-if="items.length === 0" />
    <ul>
        <li v-for="(item, index) in items" :key="index" class="font-monospace">
            <template v-if="item.path">
                At <code>{{ item.path }}</code>:
            </template>
            <span>{{ item.message }}</span>
        </li>
    </ul>
</template>

<script>
    import AiIcon from "vue-material-design-icons/Creation.vue";
    import * as Markdown from "../utils/markdown";
    import {useFlowStore} from "../stores/flow";

    export default {
        props: {
            message: {
                type: Object,
                required: true
            },
            items: {
                type: Array,
                required: true
            },
            onClose: {
                type: Function,
                default: null
            },
        },
        data() {
            return {
                markdownRenderer: undefined
            }
        },
        async created() {
            this.markdownRenderer = await this.renderMarkdown();
        },
        watch: {
            async source() {
                this.markdownRenderer = await this.renderMarkdown();
            }
        },
        computed: {
            isFlowContext() {
                const routeName = this.$route?.name;
                return routeName === "flows/update" || routeName === "flows/create";
            }
        },
        components: {AiIcon},
        methods: {
            async renderMarkdown() {
                if (this.message.response && this.message.response.status === 503) {
                    return await Markdown.render("Server is temporarily unavailable. Please try again later.", {html: true});
                }
                return await Markdown.render(this.message.message || this.message.content.message, {html: true});
            },
            async fixWithAi() {
                const errorMessage = this.message.message || this.message.content?.message || "";
                const errorItems = this.items.map(item => {
                    const path = item.path ? `At ${item.path}: ` : "";
                    return path + item.message;
                }).join("\n");

                const fullErrorMessage = [errorMessage, errorItems].filter(Boolean).join("\n\n");
                const prompt = `Fix the following error in the flow:\n${fullErrorMessage}`;

                try {
                    window.sessionStorage.setItem("kestra-ai-prompt", prompt);
                } catch (err) {
                    console.warn("AI prompt not persisted to sessionStorage:", err);
                }

                // Close the notification
                if (this.onClose) {
                    this.onClose();
                }

                const flowStore = useFlowStore();
                flowStore.setOpenAiCopilot(true);
            },
        },
    };
</script>

<style scoped lang="scss">
    ul {
        margin: 1rem 0 0;
        padding: 0;
        list-style-type: none;
    }

    li {
        font-size: 0.8rem;
        margin-top: .5rem;

    }
</style>